<template>
    <div class="el-row-item">
        <div class="item-img f-c-end" :style="'background-image:url(' + imgUrl + ')'">
            <div class="news-details-btn f-c-c" @click="getpush(title)">
                查看更多
            </div>
        </div>
        <div class="border-bottom module-item-content">
            <div class="module-item-content-text" v-for="item in dataList" :key="item.id"
                @click="goDetails(item.id, item.articleClass)">
                {{ item.title }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Module',
    props: {
        title: String,
        imgUrl: String,
        dataList: Array
    },
    methods:{
         // 文章详情跳转
         goDetails(value, art) {
            if (art != 2) {
                this.$router.push({ path: '/NewsDetails', query: { tid: value } })
            } else if (art == 2) {
                this.$router.push({ path: '/ClassVideo', query: { tid: value } })
            }
        },
        // 文章列表页跳转
        getpush(value) {
            this.$router.push({ path: '/News', query: { name: value } })
        },
    }
}
</script>

<style lang="less" scoped>

.el-row-item {
    margin-top: 25px;
    margin-right: 1px;
    height: 489px;


    .item-img {
        width: 364px;
        height: 84px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 6px;

        .news-details-btn {
            margin-top: 5px;
            width: 63px;
            height: 23px;
            border: 0;
            background: #f4f4f4;
            border-radius: 15px;
            font-size: 11px;
            font-family: NotoSansHans-Regular;
            font-weight: 400;
            color: #2a2a2a;
            cursor: pointer;
            margin-right: 20px;
            color: rgb(149, 104, 64);
        }
    }

    .border-bottom {
        border-bottom: 1px solid rgba(238, 238, 238, 0.3);
    }

    .module-item-content {
        width: 357px;
        height: 40px;

        .module-item-content-text {
            width: 357px;
            font-size: 16px;
            font-family: NotoSansHans-Regular;
            color: #000000;
            line-height: 40px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            cursor: pointer;

        }

        .module-item-content-text:hover {
            color: #ff0108;
        }
    }
}
</style>